<template>
    <div class="selectOptions">
        <div style="display: flex; width: 800px; background: var(--color-common-ff); border: 1px solid var(--color-base);">
            <div style="flex: 1;">
                <div v-for="(item, index) in typeList" style="height: 40px;" :key="index">
                    <div style="display: flex; text-align: center;" @mouseenter="showTypeName(index)" :class="{type_list_active: typeListActive == index}">
                        <i style="flex: 1; line-height: 40px;" :class="item.typeIcon"></i>
                        <div style="flex: 8; line-height: 40px; text-align: left;">{{ item.typeName }}</div>
                        <i style="flex: 3; line-height: 40px;" class="el-icon-caret-right"></i>
                    </div>
                </div>
            </div>
            <div style="flex: 3;">
                <div class="all_list_dlg_bg">
                    <div v-for="(item, index) in activeKindList" style="margin: 10px;">
                        <div class="list_title">{{ item.kindTitle }}</div>
                        <div>
                            <span class="list_name" v-for="(subitem, subIndex) in item.kindDetailsList" @click="showSelectionPage()">{{ subitem.detailsName }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'selectOptions',
    data() {
        return {
            typeList: [{
                typeName: "3C数码",
                typeIcon: "el-icon-warning"
            },{
                typeName: "日用百货",
                typeIcon: "el-icon-warning"
            },{
                typeName: "美妆日化",
                typeIcon: "el-icon-warning"
            },{
                typeName: "3C数码",
                typeIcon: "el-icon-warning"
            },{
                typeName: "3C数码",
                typeIcon: "el-icon-warning"
            },{
                typeName: "3C数码",
                typeIcon: "el-icon-warning"
            }],
            typeListActive: -1,
            activeKindList: [{
                kindTitle: "-",
                kindDetailsList:[{
                    detailsName: "-",
                    detailsUrl: "-"
                }]
            }],
            // 3C数码
            phoneList: [{
                kindTitle: "手机及配件",
                kindDetailsList:[{
                    detailsName: "手机配件",
                    detailsUrl: ""
                },{
                    detailsName: "手机配件",
                    detailsUrl: ""
                },{
                    detailsName: "手机配件",
                    detailsUrl: ""
                }]
            },{
                kindTitle: "电子产品",
                kindDetailsList:[{
                    detailsName: "闹钟",
                    detailsUrl: ""
                },{
                    detailsName: "可穿戴设备",
                    detailsUrl: ""
                },{
                    detailsName: "视频投影",
                    detailsUrl: ""
                },{
                    detailsName: "安保与监控",
                    detailsUrl: ""
                },{
                    detailsName: "便携式音频和视频",
                    detailsUrl: ""
                },{
                    detailsName: "耳机",
                    detailsUrl: ""
                },{
                    detailsName: "电脑及配件",
                    detailsUrl: ""
                },{
                    detailsName: "手机及配件",
                    detailsUrl: ""
                },{
                    detailsName: "相机及照片",
                    detailsUrl: ""
                }] 
            },{
                kindTitle: "音乐及设备",
                kindDetailsList:[{
                    detailsName: "演播室设备",
                    detailsUrl: ""
                },{
                    detailsName: "麦克风设备",
                    detailsUrl: ""
                }]
            },{
                kindTitle: "其他3C产品",
                kindDetailsList:[{
                    detailsName: "其他3C产品",
                    detailsUrl: ""
                }]
            }],
            // 美妆日化
            necessitiesList: [{
                kindTitle: "日用百货",
                kindDetailsList:[{
                    detailsName: "烟油",
                    detailsUrl: ""
                },{
                    detailsName: "玻璃杯",
                    detailsUrl: ""
                },{
                    detailsName: "饭盒",
                    detailsUrl: ""
                },{
                    detailsName: "开瓶器",
                    detailsUrl: ""
                },{
                    detailsName: "太阳伞",
                    detailsUrl: ""
                },{
                    detailsName: "暖宝宝",
                    detailsUrl: ""
                },{
                    detailsName: "电子秤",
                    detailsUrl: ""
                },{
                    detailsName: "打火机",
                    detailsUrl: ""
                },{
                    detailsName: "陶瓷刀",
                    detailsUrl: ""
                }]
            },{
                kindTitle: "食品",
                kindDetailsList:[{
                    detailsName: "槟榔",
                    detailsUrl: ""
                },{
                    detailsName: "海参",
                    detailsUrl: ""
                },{
                    detailsName: "保健品",
                    detailsUrl: ""
                },{
                    detailsName: "阿胶糕",
                    detailsUrl: ""
                },{
                    detailsName: "牛肉干",
                    detailsUrl: ""
                },{
                    detailsName: "巧克力",
                    detailsUrl: ""
                },{
                    detailsName: "鱿鱼丝",
                    detailsUrl: ""
                },{
                    detailsName: "进口食品",
                    detailsUrl: ""
                },{
                    detailsName: "零食",
                    detailsUrl: ""
                }] 
            },{
                kindTitle: "饮料",
                kindDetailsList:[{
                    detailsName: "蜂蜜",
                    detailsUrl: ""
                },{
                    detailsName: "葡萄酒",
                    detailsUrl: ""
                },{
                    detailsName: "奶粉",
                    detailsUrl: ""
                },{
                    detailsName: "茶叶",
                    detailsUrl: ""
                },{
                    detailsName: "啤酒",
                    detailsUrl: ""
                },{
                    detailsName: "茅台",
                    detailsUrl: ""
                },{
                    detailsName: "花茶",
                    detailsUrl: ""
                },{
                    detailsName: "普洱茶",
                    detailsUrl: ""
                }]
            },{
                kindTitle: "工艺品",
                kindDetailsList:[{
                    detailsName: "装饰品",
                    detailsUrl: ""
                },{
                    detailsName: "徽章",
                    detailsUrl: ""
                },{
                    detailsName: "钥匙圈",
                    detailsUrl: ""
                },{
                    detailsName: "相册",
                    detailsUrl: ""
                },{
                    detailsName: "气球",
                    detailsUrl: ""
                },{
                    detailsName: "花盆",
                    detailsUrl: ""
                },{
                    detailsName: "纪念币",
                    detailsUrl: ""
                },{
                    detailsName: "金属工艺品",
                    detailsUrl: ""
                },{
                    detailsName: "木质工艺品",
                    detailsUrl: ""
                }]
            },{
                kindTitle: "宠物及园艺",
                kindDetailsList:[{
                    detailsName: "多肉植物",
                    detailsUrl: ""
                },{
                    detailsName: "黑麦草种子",
                    detailsUrl: ""
                },{
                    detailsName: "竹子",
                    detailsUrl: ""
                },{
                    detailsName: "桂花树",
                    detailsUrl: ""
                },{
                    detailsName: "景观石",
                    detailsUrl: ""
                },{
                    detailsName: "穴盘育苗盘",
                    detailsUrl: ""
                },{
                    detailsName: "宠物用品",
                    detailsUrl: ""
                },{
                    detailsName: "育苗基质",
                    detailsUrl: ""
                },{
                    detailsName: "千层石",
                    detailsUrl: ""
                },{
                    detailsName: "狗衣服",
                    detailsUrl: ""
                },{
                    detailsName: "宠物垫",
                    detailsUrl: ""
                },{
                    detailsName: "育苗盘",
                    detailsUrl: ""
                },{
                    detailsName: "花盆",
                    detailsUrl: ""
                },{
                    detailsName: "围栏",
                    detailsUrl: ""
                },{
                    detailsName: "鸟笼",
                    detailsUrl: ""
                },{
                    detailsName: "猫玩具",
                    detailsUrl: ""
                },{
                    detailsName: "樱花苗",
                    detailsUrl: ""
                }]
            }]
        }
    },
    mounted() {
        this.activeKindList = this.phoneList
        this.typeListActive = 0
    },
    methods: {
        showTypeName(index) {
            this.typeListActive = index
            if(index == 0) {
                this.activeKindList = this.phoneList
            } else if(index == 1){
                this.activeKindList = this.necessitiesList
            } else if(index == 2){
                this.activeKindList = this.phoneList
            } else if(index == 3){
                this.activeKindList = this.necessitiesList
            } else if(index == 4){
                this.activeKindList = this.phoneList
            } else if(index == 5){
                this.activeKindList = this.necessitiesList
            }
        },
    }
}
</script>
<style scoped>
.type_list_active {
    background-color: var(--color-base);
    color: var(--color-common-ff);
    font-weight: bold;
}
.all_list_dlg_bg {
    position: absolute;
    top: 0;
    left: 200px;
    background-color: var(--color-common-ff);
    border: 1px solid var(--color-base);
}
.list_title {
    color: var(--color-base);
    font-size: 16px;
    margin-bottom: 15px;
}
.list_name {
    font-size: 14px;
    padding-right: 20px;
    cursor: pointer;
}
.item_card {
    width: 300px;
    height: 340px;
    background-color: var(--color-common-f2);
    margin: 0 auto;
}
.item_card div {
    text-align: center;
}
.item_card img {
    width: 200px;
    height: 200px;
    margin: 20px 50px;
}
.details_btn {
    width: 100px;
    height: 28px;
    line-height: 28px;
    margin: 20px auto;
    text-align: center;
    font-size: 16px;
    background-color: var(--color-base);
    color: var(--color-common-ff);
    border: 1px solid var(--color-base);
    border-radius: 15px;
}
.details_btn:hover {
    cursor: pointer;
}
</style>